---
title: Ảnh đại diện tùy chỉnh
description: Tùy chỉnh ảnh đại diện người dùng của ứng dụng
---

# Ảnh đại diện tùy chỉnh

## Tùy chỉnh ảnh đại diện của người dùng ứng dụng

Theo mặc định, chúng tôi cung cấp một ảnh đại diện cho người dùng nếu hình ảnh ENS của họ chưa được thiết lập, nhưng bạn có thể tùy chỉnh điều này bằng cách cung cấp thành phần ảnh đại diện của riêng bạn. Bạn có thể nhập kiểu `AvatarComponent` nếu sử dụng TypeScript:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

`AvatarComponent` được truyền vào thuộc tính `avatar` có các kiểu thuộc tính như sau: `<{ address: string; ensImage?: string | null; size: number;}>`
